<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>管理员列表</title>
    <link rel="stylesheet" type="text/css" href="/manager/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/manager/easyui/themes/icon.css">
    <script type="text/javascript" src="/manager/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/manager/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
	    //工具栏
	    var toolbar = [{
	        text: '新增',
	        iconCls: 'icon-add',
	        handler: function () {
	            //添加前，把表格置为空
                $("#id").textbox("setValue", "");
                $("#username").textbox("setValue", "");
                $("#password").textbox("setValue", "");

                $('#ah').combobox({
                    multiple: true,
                    width:100,
                    method:'get',
                    valueField:'id',
                    textField:'name',
                    panelHeight:'auto',
                    url: "/manager/role/findRoles"
                });

	            $('#dd').dialog('open');
	        }
	    }, '-',{
	        text: '修改',
	        iconCls: 'icon-edit',
	        handler: function () {
	            var row = $("#userlist").datagrid("getSelected");
                $('#ah').combobox({
                    multiple: true,
                    width:100,
                    method:'get',
                    valueField:'id',
                    textField:'name',
                    panelHeight:'auto',
                    url: "/manager/role/findRoles"
                });

	            $.ajax({
                    url: "/manager/managerUser/findById",
                    data: {id:row.id},
                    method: 'get',
                    dataType: 'json',
                    success: function (res) {
                        if (res.code == 200){
                            var roleIDs =[]
                            for (let r of res.data.roles){
                                roleIDs.push(r.id);
                            }
                            $("#id").textbox("setValue", res.data.id);
                            $("#username").textbox("setValue", res.data.username);
                            $("#password").textbox("setValue", res.data.password);
                            // 设置选中的值可以这么写吗 可以。
                            $('#ah').combobox('setValues', roleIDs);

                        }else{
                            alert("未找到该用户,请刷新!");
                        }
                    }
                })
	            $('#dd').dialog('open');
	        }
	    }];
	   $(function(){
	       $('#userlist').datagrid({
               singleSelect: true,
			title:'管理员列表',  
			iconCls:'icon-save',   
			// url:'json/datagrid_data1.json',
             url: "/manager/managerUser/findAll",
			columns:[
			    [
				{field:'id',title:'管理员ID',width:100,align:'center'},
				{field:'username',title:'管理员名称',width:100,align:'center'},
				{field:'password',title:'管理员密码',width:100,align:'center'},
				{field:'roles',title:'拥有的角色',width:200,align:'center',formatter:format}
			]
            ],
			pagination:true,
			toolbar: toolbar  
		});
		 //初始化查询栏
		 $("#submit_search").linkbutton({ iconCls: 'icon-search', plain: true })
            .click(function () {
                $('#userlist').datagrid(
                    {
                        queryParams:{
                            username:$("#managerName").val()
                        }
                    });   //点击搜索
            });
          
          //初始化修改窗口  
         $('#dd').dialog({
			    title: 'My Dialog',
			    width: 700,
			    height: 500,
			    closed: true,
			    cache: false,
			    href: '',
			    modal: true,
			    iconCls: 'icon-save',
                buttons: [{
                    text:'提交',
                    iconCls:'icon-ok',
                    handler:function(){
                        addManager();
                        // alert('ok');

                    }
                },{
                    text:'关闭',
                    handler:function(){
                        alert('cancel');;
                    }
                }]
			});
	   });

	   // 增加和修改共用一个方法， 通过是否有id判断url 是增加还是修改！！！
	   function addManager() {
	       var id = $("#id").val();
	       var username = $("#username").val();
	       var password = $("#password").val();
	       var roles = $("#ah").combobox("getValues");
	       if (id == null || id == ""){
	           var url ="/manager/managerUser/addUser";
           }else{
               url ="/manager/managerUser/modifyUSer";
           }
           console.log(url);
           $.ajax({
               url: url,
               data:{
                   id: id,
                   username: username,
                   password: password,
                   roles: roles
               },
               dataType: 'json',
               success: function (res) {
                   if (res.code == 200){
                       alert("add successfully!");
                       $("#dd").dialog("close");
                       $("#userlist").datagrid("reload");
                   }
               }
           })
       }

        function format(val){
            var sel="<select name='search_type'>";
            for (let v of val){
                sel +="<option>"+ v.name+"</option>";
            }
            sel +="</select>";
            return sel;
        }
	</script>
</head>
<body>
   <form name="searchform" method="post" action="" id ="searchform">
    <td width="70" height="30"><strong>管理员查询：</strong></td>
    <td height="30">
        <input id="managerName" type="text" name="keyword" size=20 placeholder="管理员名称"/>
        <a id="submit_search">搜索</a>
    </td>
  </form>
  <table id="userlist"></table>
    <div id="dd">
           <div align="center" style="margin-top: 30px">
            <form id="ff" method="post">
            <div style="margin-bottom:20px">
                <input id="id" class="easyui-textbox" name="name" style="width:50%" data-options="label:'管理员ID:'" readonly="readonly"/>
            </div>
            <div style="margin-bottom:20px">
                <input id="username" class="easyui-textbox" name="name" style="width:50%" data-options="label:'管理员名称:',required:true">
            </div>
             <div style="margin-bottom:20px">
                <input  id="password" class="easyui-textbox" type="password" name="name" style="width:50%" data-options="label:'管理员密码:',required:true">
            </div>
            <div style="margin-bottom:20px">
                  <table style="width:48%">
                    <td valign="top" style="width:50px">
                                                              角色:
                    </td>
                    <td><ul id="ah"></ul></td>
                  </table>
            </div>
        </form>
        </div>
    </div>
</body>
</html>